<template>
    <div class="pageAll" @keyup.enter="loginIn">
		<div class="loginForm">
			<div class="logTitle">欢迎</div>
			<a-card title="登录" class="loginCard" >
				<a-form-model  ref="checkForm" :model="loginInfo" :rules="formRule">
          <a-form-model-item prop="userName">
            <a-input v-model="loginInfo.userName" placeholder="手机号/邮箱">
				      <a-icon slot="suffix" type="user" />
				  </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
            <a-input-password v-model="loginInfo.password" placeholder="密码" autocomplete="off"/>
        </a-form-model-item>
        </a-form-model>
			</a-card>
			 <a-button type="primary" icon="login"  @click="loginIn">立即登录</a-button>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
        formRule:{
					userName: [{
							required: true,
              message: '请输入用户名',
              trigger: ['change', 'blur']

						}],
					password: [{
						required: true,
            message: '请输入密码',
            trigger: ['change', 'blur']
            }]
        },
				loginInfo:{
				userName:"",
				password:""
			  }
			}
		},
		methods:{
			loginIn(){
        this.$refs.checkForm.validate(valid=>{
          if(valid){
            this.$http.axios.post('Login',this.loginInfo)
              .then((response)=>{
                if(response.data.result){
                  this.$router.push({path:"/Home"});
                }else{
                  this.$global.toast(response.data.message);
                  this.loginInfo={userName:"", password:""};
                }})
              .catch((error)=>{
                this.$global.toast(error);
                });
          }
        });
      }
	  }
}
</script>

<style lang="scss" scoped>
	.pageAll{
		width: 100vw;
		height:100vh;
		background: linear-gradient(blue, rgb(224, 21, 21));
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.loginForm{
			.logTitle{
				font-weight: bold;
				font-size: 36px;
			}
			.loginCard{
				border-radius: 8px;
				width: 70%;
				margin: 20px 20vw 20px 0;
			}
		}
	}
</style>
